<template>
  <PageMain>
    <template #header></template>
    <template #body>
      <div
        class="resource-view-1-box w-full h-full overflow-hidden box-border flex justify-start items-center flex-col"
      >
        <div
          class="content w-full h-[calc(100%_-_64px)] box-border p-[20px_24px] overflow-hidden overflow-y-auto"
        >
          <div
            class="w-full h-[56px] p-[16px_0] overflow-hidden box-border flex justify-start items-start"
            style="font-size: 16px; font-weight: bold; color: #394d73"
          >
            基础信息
          </div>
          <!--          box-border bg-[#f7f9fc]-->
          <div class="info w-full h-auto p-[20px] rounded-[8px]">
            <a-row>
              <a-col :span="8">
                <div class="content">
                  <span style="color: red; margin-right: 3px">*</span>
                  <span class="icon">凭证编号 </span>
                  <textInput disabled v-model="formInline.code"></textInput>
                </div>
              </a-col>
              <a-col :span="8">
                <div class="content">
                  <span style="color: red; margin-right: 3px">*</span>
                  <span class="icon">凭证金额 </span>
                  <textInput disabled v-model="formInline.total_amount"></textInput>
                </div>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="8">
                <div class="content">
                  <span style="color: red; margin-right: 3px">*</span>
                  <span class="icon">凭证名称 </span>
                  <textInput disabled v-model="formInline.name"></textInput>
                </div>
              </a-col>
              <a-col :span="8">
                <div class="content">
                  <span style="color: red; margin-right: 3px">*</span>
                  <span class="icon">已分金额 </span>
                  <textInput disabled v-model="formInline.allocated_amount"></textInput>
                </div>
              </a-col>
            </a-row>
          </div>
          <div
            class="w-full h-[56px] p-[16px_0] overflow-hidden box-border flex justify-start items-start"
            style="font-size: 16px; font-weight: bold; color: #394d73"
          >
            关联信息
          </div>
          <div class="main-box">
            <div class="left-box">
              <a-row class="header-title">
                <a-col :span="14" class="header-class">科目选择</a-col>
                <a-col :span="10" class="header-class">已分摊 %</a-col>
              </a-row>
              <div style="overflow-y: auto; overflow-x: hidden; height: 388px">
                <a-radio-group
                  v-model="checkedSubject"
                  style="width: 100%"
                  :min="0"
                  :max="1"
                  @change="handleChangeSubject"
                >
                  <template v-for="item in subjectArr" :key="item.accounting_subject_id">
                    <a-radio :value="item.accounting_subject_id" style="width: 100%">
                      <template #radio="{ checked }">
                        <div class="radio-class" :class="{ 'custom-radio-card-checked': checked }">
                          <div class="custom-radio-card-mask">
                            <div class="custom-radio-card-mask-dot" />
                          </div>
                          <div class="txt-box">
                            <div class="custom-radio-card-title first-box">
                              {{ item.accounting_subject + '-' + item.accounting_subject_detail }}
                            </div>
                            <div class="custom-radio-card-title second-box">{{ item.amount }}%</div>
                            <div class="custom-radio-card-title three-box">
                              <a-button @click="handleClickDialogShow(item)">
                                <template #icon>
                                  <icon-plus />
                                </template>
                              </a-button>
                            </div>
                          </div>
                        </div>
                      </template>
                    </a-radio>
                  </template>
                </a-radio-group>
              </div>
            </div>
            <div class="right-box">
              <CommonTable
                  :loading="loading"
                  :showPagination="false"
                :columnsData="associationTableDataColumns"
                :tableData="tableData"
              >
                <template #index="{ rowIndex }">
                  <span>{{ rowIndex + 1 }}</span>
                </template>
                <template #amount="{ rowIndex }">
                  <textInput
                    width="100%"
                    :disabled="tableData[rowIndex].isSave"
                    v-model="tableData[rowIndex].amount"
                  ></textInput>
                </template>
                <template #operator="{ record, rowIndex }">
                  <a-link type="text" v-if="record.isSave" @click="updateEvent(record, rowIndex)"
                    >编辑</a-link
                  >
                  <a-link type="primary" v-else @click="saveClick(record, rowIndex)">保存</a-link>
                  <a-link type="text" @click="remove(record)">删除</a-link>
                </template>
              </CommonTable>
            </div>
          </div>
        </div>
      </div>
      <AddDialog
        v-if="ceDialogShow"
        :show="ceDialogShow"
        :id="subjectId"
        :code="subjectCode"
        :amount="42"
        :data="tableData"
        @close="handleClose"
      >
      </AddDialog>
    </template>
  </PageMain>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive ,toRaw } from 'vue';
import { associationTableDataColumns } from './values';
import AddDialog from '@/views/cost_assignment/voucher_management/components/AddDialog.vue';
import {getCorrelationList} from '@/api/costManagement/voucher_management/index';
import { Message } from '@arco-design/web-vue';
const checkedSubject = ref(); // 默认选中的科目

const ceDialogShow = ref(false);
const subjectId = ref(); // 当前选中的科目Id
const subjectCode = ref(); // 当前选中的科目code打开弹窗
const allCorrelationData = ref<any>(); //所有关联数据
const loading = ref<boolean>(false)

const subjectRadioData = ref<any>();
// 表单数据
const formInline = reactive({
  code: '', //凭证编号
  allocated_amount: '', //已分配金额
  name: '', //项目名称
  total_amount:'',//	总金额
  data:{},
  cost_allocation_subject:[],//凭证的会计科目数据
});
interface type {
  id: number;
  summary: string;
  accounting_subject_id: number;
  accounting_subject_code: number;
  accounting_subject: string;
  accounting_subject_detail: string;
  amount: string;
}
const subjectArr = ref<type[]>(); //科目列表


interface tableType {
  amount?: string;
  asset_project_id?:number;
  asset_project_name?: string;
  id?:number;
  item_id?:number;
  item_name?: string;
  item_type?: string;
  isSave?: boolean;
}
const tableData = ref<tableType[]>([]);


/**
 * @method handleChangeSubject  选择对应的科目筛选并展示关联数据
 * @param val
 */
const handleChangeSubject = (id:any) => {
  tableData.value = []
  let obj:any = {}
  if(allCorrelationData.value[id]){
    obj = toRaw(allCorrelationData.value[id])
    for(const key in obj){
      for(const subKey in obj[key]){
        obj[key][subKey].isSave = true
        tableData.value.push(obj[key][subKey])
      }
    }
  }
}

const handleClickDialogShow = (item: type) => {
  subjectId.value = item.accounting_subject_id;
  subjectCode.value = item.accounting_subject_code;
  ceDialogShow.value = true;
};

/**
 * @method  handleClose 关闭弹窗
 */
const handleClose = (val: boolean) => {
  ceDialogShow.value = val;
};

/**
 * @method checkDetail  获取详情
 */
const checkDetail =async () => {
   loading.value = true
   const res = await getCorrelationList('6');
   if (res.code ==='00000'){
     Object.keys(res.data).forEach((key) => {
       if (formInline.hasOwnProperty(key)) {
         formInline[key] = res.data[key];
       }
     });
     allCorrelationData.value = res.data.data;//所有关联数据
     //赋值关联信息-左
     subjectArr.value = formInline.cost_allocation_subject;
     //右
     subjectRadioData.value = formInline.cost_allocation_subject;

     if(subjectRadioData.value.length > 0) { // 默认选择第一个并获取第一个的关联列表数据
       checkedSubject.value = subjectRadioData.value[0].accounting_subject_id
       handleChangeSubject(checkedSubject.value)//选择右边的数据
     }
     computedRatio(toRaw(allCorrelationData.value)) // 循环计算已分金额
   }else {
     Message.error(`${res.message}`)
   }
   loading.value = false
};

/**
 * @method saveClick 表格编辑
 */
function saveClick(item: any, index: number) {
  item.isSave = true;
  console.log(index);

  //调接口
}

/**
 * @method 计算所有科目的分摊比例
 */
const computedRatio = (array:any) => {
  let allAmount:number = 0
  // 循环合并添加到一个数组中
  if(array){
    for (const key in array) {
      for (const item of subjectRadioData.value) {
        if(parseInt(key) === item.accounting_subject_id){
          for (const subkey in array[key]) {
            array[key][subkey].forEach((element:any) => {
              allAmount += Number(element.amount)
              item.radioAmount += Number(element.amount)
            })
          }
        }
      }
    }
    console.log(allAmount);
  }else{
    return 0
  }
}

/**
 * @method  remove 删除
 */
const remove = (item: any) => {
  console.log(item);
};
/**
 * @method updateEvent 编辑
 */
const updateEvent = (item: any, index: number) => {
  item.isSave = false;
  console.log(item, index, 'item');
};

onMounted(() => {
  checkDetail();
});
</script>

<style lang="less" scoped>
.main-box {
  display: flex;
  border-top: 1px solid #ebf0fa;
  justify-content: space-between;
  .left-box {
    width: calc(20% - 10px);
    //border: 1px solid;
    height: 25rem;
    padding: 12px 0 0 8px;
    .header-title {
      height: 2rem;
      line-height: 2rem;
      background: #f7f9fc;
      .header-class {
        font-size: 14px;
        font-weight: normal;
        color: #394d73;
      }
    }
  }
  .right-box {
    width: calc(80% - 10px);
    border-left: 1px solid #ebf0fa;
    height: 25rem;
    overflow-y: auto;
    padding: 8px 2px 0 8px;
  }
}
.content {
  margin-bottom: 33px;
  font-size: 14px;
  color: #465a80;

  .icon {
    color: #a3b0cc;
    font-size: 14px;
    font-weight: normal;
  }
  .text {
    padding-left: 16px;
    color: #465a80;
    font-size: 14px;
    font-weight: normal;
  }
}
.page-main-box {
  background: #ffffff !important;
}
.radio-class {
  width: 100%;
  display: flex;
  height: 48px;
  margin-bottom: 2px;
  border-radius: 5px;
  align-items: center;
  position: relative;
  .first-box {
    width: 80%;
  }
  .second-box {
    position: absolute;
    left: 70%;
  }
  .three-box {
    position: absolute;
    right: 2px;
  }
}
.radio-class:hover {
  background: #f0f4fa;
}

.txt-box {
  width: 100%;
  display: flex;
  margin-left: 5px;
  align-items: center;
  position: relative;
}

.custom-radio-card-mask {
  height: 14px;
  width: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid #d8dfed;
  box-sizing: border-box;
}

.custom-radio-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}

.custom-radio-card-title {
  color: #465a80;
  font-size: 14px;
  font-weight: bold;
}

.custom-radio-card:hover,
.custom-radio-card-checked,
.custom-radio-card:hover .custom-radio-card-mask,
.custom-radio-card-checked .custom-radio-card-mask {
  border-color: rgb(var(--primary-6));
}

.custom-radio-card-checked {
  background-color: #e5effe;
}

.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: #465a80;
}

.custom-radio-card-checked .custom-radio-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
</style>
